<template>
  <view class="container client_container">
    <tm-sheet :margin="[20,30,20,24]" :round="3" :shadow="2">
      <view class="cust_det_sta">
        <text class="cust_sta">客户状态</text>
        <text v-if="custDetailModel.status === 1" style="color: #165DFF"  class="cust_sta_text">待跟进</text>
        <text v-if="custDetailModel.status === 2" style="color: #2ACFCE"  class="cust_sta_text">已上门</text>
        <text v-if="custDetailModel.status === 3" style="color: #F5319D"  class="cust_sta_text">未上门</text>
        <text v-if="custDetailModel.status === 4" style="color: #00B42A"  class="cust_sta_text">已签约</text>
        <text v-if="custDetailModel.status === 5" style="color: #88929E"  class="cust_sta_text">已流失</text>
      </view>
    </tm-sheet>
    <view class="cust_det_title">
      <text>基础信息</text>
    </view>
    <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view class="channel_item_content">
        <view class="cus_item">
          <view class="cus_item_label">客户名称</view>
          <view class="cus_item_value">{{custDetailModel.name}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">行业</view>
          <view class="cus_item_value">{{custDetailModel.industry_text}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">客户联系人</view>
          <view class="cus_item_value">{{custDetailModel.contact_name}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">客户联系人电话</view>
          <view class="cus_item_value" style="flex-grow: 1">
            <view style="display: flex;justify-content: space-between;">
              <view>{{custDetailModel.contact_mobile}}</view>
              <tm-icon fontSize="32" name="iconfont icon-dianhua" color="#165DFF" @click="()=>myCallPhone(custDetailModel.contact_mobile)"></tm-icon>
            </view>
          </view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">其他联系方式</view>
          <view style="flex-grow: 1; display: flex; align-items: center;">
            <view class="cus_item_value" v-if="custDetailModel.other_contact_channel === 0">微信</view>
            <view class="cus_item_value" v-if="custDetailModel.other_contact_channel === 2">邮箱</view>
            <view class="cus_item_value" v-if="custDetailModel.other_contact_channel === 3">固话</view>
            <view class="cus_item_value" v-if="custDetailModel.other_contact_channel === 4">其他</view>

            <view style="display: flex;justify-content: space-between;">
              <view class="cus_item_value">{{custDetailModel.other_contact_value}}</view>
              <view><tm-icon fontSize="32" name="iconfont icon-fuzhi" color="#165DFF" @click="()=>copyEmail(12345678)"></tm-icon></view>
            </view>
          </view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">跟进人</view>
          <view class="cus_item_value">{{custDetailModel.follow_name}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">渠道来源</view>
          <view v-if="custDetailModel.source_channel == 1" class="cus_item_value">中介渠道</view>
          <view v-if="custDetailModel.source_channel == 2" class="cus_item_value">关系渠道</view>
          <view v-if="custDetailModel.source_channel == 3" class="cus_item_value">推广渠道</view>
          <view v-if="custDetailModel.source_channel == 4" class="cus_item_value">其他渠道</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">到访时间</view>
          <view class="cus_item_value">{{custDetailModel.visit_time ? moment(custDetailModel.visit_time).format("YYYY-MM-DD") : '-'}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">渠道联系人</view>
          <view class="cus_item_value">{{custDetailModel.channel_contact_name}}</view>
        </view>
      </view>
    </tm-sheet>
    <view class="cust_det_title">
      <text>预租信息</text>
    </view>
    <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view class="channel_item_content">
        <view class="cus_item">
          <view class="cus_item_label">预租面积</view>
          <view class="cus_item_value">{{custDetailModel.pre_lease_area_min}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">预算价格</view>
          <view class="cus_item_value">{{custDetailModel.per_lease_price}}{{custDetailModel.price_unit_text}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">关注点</view>
          <view class="cus_item_value">{{custDetailModel.follows}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">预计入住时间</view>
          <view class="cus_item_value">{{custDetailModel.pre_settled_time ? moment(custDetailModel.pre_settled_time).format("YYYY-MM-DD") : '-'}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">预计成交率</view>
          <view class="cus_item_value">{{custDetailModel.per_probability}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">备注</view>
          <view class="cus_item_value">{{custDetailModel.remark}}</view>
        </view>
      </view>
    </tm-sheet>
    <view class="cust_det_title">
      <text>推荐房源</text>
    </view>
    <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view v-for="item in recommandHourse" class="cust_recom_hourse" :key="index" >
        <view style="display: flex">
          <view>
            <tm-image :src="`${ASSETS_HOST}/${getBuilddingInfo(item).house_resource_imgs}`" :width="212" :height="212"></tm-image>
            <view v-if="getBuilddingInfo(item).promotion_label.length > 0" class="use_label">{{getBuilddingInfo(item).promotion_label[0].name}}</view>
          </view>

          <view style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10px">
            <view>
              <view class="space_bottom_10">{{item.name}}</view>
              <view style="display: flex" class="space_bottom_10">
                <tm-icon _style="line-height:18px"  fontSize="24" name="iconfont icon-zukeduan-xiangmu" color="#8091A4" @click=""></tm-icon>
                <view class="space_left_5">
                  <text class="cust_recom_hourse_area">{{ getBuilddingInfo(item).province_text }}  {{ getBuilddingInfo(item).city_text }}{{ getBuilddingInfo(item).district_text }}  </text>
                  <text class="cust_recom_hourse_address">  {{ getBuilddingInfo(item).address }}</text>
                </view>
              </view>
              <view class="cust_recom_hourse_pt">
                <tm-tag v-for="pt in getBuilddingInfo(item).supporting_facilities_list" :key="pt.id" _style="background-color:rgba(74,118,247,0.2);padding-left: 0px;padding-right: 0px;margin-right: 0px"  size="xs" fontColor="#4A76F7" :label="pt.name"></tm-tag>
              </view>
            </view>
            <view style="display: flex">
              <tm-icon _style="line-height:18px" fontSize="24" name="iconfont icon-mianji" color="#8091A4" @click=""></tm-icon>
              <text class="space_left_5">{{getBuilddingInfo(item).rental_area}}㎡</text>
              <text style="margin-left: 10px;color:#F7A04A">¥{{getBuilddingInfo(item).pre_lease_price}}{{getBuilddingInfo(item).price_unit_text}}</text>
            </view>
          </view>
        </view>
        <view style="display: flex;justify-content: space-between;margin-top: 20px">
          <view style="display: flex;" @click="()=>markHourse(item)">
            <tm-icon _style="line-height:18px" fontSize="28" :name="item.intention?'iconfont icon-biaoji':'iconfont icon-quxiaobiaoji'" color="#4A76F7" @click=""></tm-icon>
            <view class="space_left_5"><text>{{item.intention?'取消标记':'标记意向房源'}}</text></view>
          </view>
          <view style="display: flex;" @click="()=>removeHourse(item)">
            <tm-icon _style="line-height:18px" fontSize="28" name="iconfont icon-shanchu1" color="#EA0000"></tm-icon>
            <view class="space_left_5"><text>移除房源</text></view>
          </view>
        </view>
      </view>
      <view class="cust_hourse_op" style="margin-top:0px">
        <view class="recommand_button" @click="()=>addRecommandHourse()">
          <tm-icon _style="line-height:22px" color="#4A76F7" fontSize="32" name="iconfont icon-tianjiatuijianfangyuan" ></tm-icon>
          <text style="font-size: 16px;color: #4A76F7;margin-left: 5px">添加推荐房源</text>
        </view>
        <view  v-if="recommandHourse.length > 0" class="recommand_button" style="background-color: rgba(227, 249, 210, 1);margin-left: 15px">
          <tm-icon _style="line-height:22px" color="#62CE0F" fontSize="32" name="iconfont icon-fenxiangtuijian" ></tm-icon>
          <text style="font-size: 16px;color: #62CE0F;margin-left: 5px">分享推荐房源</text>
        </view>
      </view>
    </tm-sheet>
    <view class="cust_det_title">
      <text>操作记录</text>
    </view>
    <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view class="cust_op">
        <view v-for="op in custOp.list" style="border-bottom: 1px solid #F4F4F4;">
          <view style="display: flex;justify-content: space-between;margin-bottom: 10px;">
            <text>{{op.real_name}}</text>
            <text style="">{{moment(op.created_at).format("YYYY-MM-DD HH:mm")}}</text>
          </view>
          <text class="cust_op_action" style="">{{op.remark}}</text>
        </view>
      </view>
    </tm-sheet>
    <view class="cust_det_title">
      <text> </text>
    </view>
    <view class="cus_footer_btn">
      <up-button type="primary" customStyle="width: 150px;" shape="circle" plain  text="跟进记录" @click="fllowRecord"></up-button>
      <up-button type="primary" customStyle="width: 150px;" shape="circle" text="编辑" @click="editCust"></up-button>
    </view>

    <tm-drawer :title="`跟进记录(共${custOp?.list?.length}次)`" :height="1200" placement="bottom" v-model:show="showWin">
      <view style="padding-bottom: 100px">
        <view v-for="item in custOp.list" class="follow_item">
          <tm-sheet :margin="[24, 20]" :round="3" :shadow="2" color="#FAFAFA">
            <view class="follow_item_head">
              <tm-tag v-if="item.status === 1" text :shadow="0" color="#165DFF" size="m" label="待跟进"></tm-tag>
              <tm-tag v-if="item.status === 2" text :shadow="0" color="#2ACFCE" size="m" label="已上门"></tm-tag>
              <tm-tag v-if="item.status === 3" text :shadow="0" color="#F5319D" size="m" label="未上门"></tm-tag>
              <!--            <tm-tag v-if="item.status === 4" text :shadow="0" color="#00B42A" size="m" label="已签约"></tm-tag>-->
              <!--            <tm-tag v-if="item.status === 5" text :shadow="0" color="#88929E" size="m" label="已流失"></tm-tag>-->
              <text class="head_item_time">{{ item.created_at ? moment(item.created_at).format("YYYY-MM-DD HH:mm:ss"): '-'}}</text>
            </view>
            <view class="cus_item">
              <view class="cus_item_label">带看</view>
              <view class="cus_item_value">{{item.look == 1? '是':'否'}}</view>
            </view>

            <view class="cus_item">
              <view class="cus_item_label">时间</view>
              <view class="cus_item_value">{{item.look_at ? moment(item.look_at).format("YYYY-MM-DD HH:mm:ss") : '-'}}</view>
            </view>
            <view class="cus_item">
              <view class="cus_item_label">房源</view>
              <view class="cus_item_value">{{item.building_info?.community_building?.name}}/{{item.building_info?.community_floor?.name}}/{{item.building_info?.floor}}</view>
            </view>
            <view class="cus_item">
              <view class="cus_item_label">成交几率</view>
              <view class="cus_item_value">{{item.per_probability? item.per_probability:'-'}}</view>
            </view>
            <view class="cus_item">
              <view class="cus_item_label">跟进说明</view>
              <view class="cus_item_value">{{item.remark}}</view>
            </view>
          </tm-sheet>
        </view>
      </view>
      <view class="cus_footer_btn" style="bottom: 33px;">
        <up-button type="primary" shape="circle" text="添加跟进记录" @click="toAddFlowWin"></up-button>
      </view>

    </tm-drawer>
    <tm-drawer :title="'添加跟进记录'" :height="1200" placement="bottom" v-model:show="addFollowWin">
      <view style="padding-bottom: 110px;">
        <view style="padding: 10px 22px;">
          <view class="zs_form_item">
            <view class="zs_form_item_label"><text class="zs_form_required">*</text>客户状态</view>
            <view class="zs_form_item_value">
              <view @click="() => clientStatusVisible = true" class="zs_form_select">
                <view v-if="fllowFormData.status">{{fllowFormData.status_text}}</view>
                <view v-else style="color: #999999;">请选择</view>
                <tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1"></tm-icon>
              </view>
            </view>
          </view>
          <view v-if="fllowFormData.status != 1" class="zs_form_item">
            <view class="zs_form_item_label"><text class="zs_form_required">*</text>是否带看</view>
            <view class="zs_form_item_value">
              <view class="look_at">
                <view :class="['look_at_item', fllowFormData.look === 1 ? 'selected' : '' ]" @click="() => fllowFormData.look =1">是</view>
                <view :class="['look_at_item', fllowFormData.look === 0 ? 'selected' : '' ]" @click="() => fllowFormData.look =0">否</view>
              </view>
            </view>
          </view>
          <view v-if="fllowFormData.status != 1" class="zs_form_item">
            <view class="zs_form_item_label">带看时间</view>
            <view class="zs_form_item_value">
              <!--               加选择时间 todo-->
              <view @click="() => timeVisible = true" class="zs_form_select">
                <view v-if="fllowFormData.look_at">{{moment(fllowFormData.look_at).format('YYYY-MM-DD')}}</view>
                <view v-else style="color: #999999;">请选择</view>
                <tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1"></tm-icon>
              </view>
            </view>
          </view>
          <view class="zs_form_item">
            <view class="zs_form_item_label">选择房源</view>
            <view class="zs_form_item_value">
              <view class="zs_form_item_value">
                <view @click="fllowRecordAddHousingResource" class="zs_form_select">
                  <view v-if="fllowFormData.building_id">{{fllowFormData.building_name}}</view>
                  <view v-else style="color: #999999;">请选择</view>
                  <tm-icon fontSize="24" name="iconfont icon-youjiantou" color="#3A6CB1"></tm-icon>
                </view>

              </view>
            </view>
          </view>

          <view class="zs_form_item">
            <view class="zs_form_item_label">预计成交率</view>
            <view class="zs_form_item_value">
              <up-input
                  placeholder="请输入"
                  border="surround"
                  v-model="fllowFormData.per_probability"
                  placeholderStyle="color: #999"
                  customStyle="background: #F9F9F9"
              ></up-input>
            </view>
          </view>
          <view class="zs_form_item">
            <view class="zs_form_item_label">跟进说明</view>
            <view class="zs_form_item_value">
              <up-input
                  placeholder="请输入"
                  border="surround"
                  v-model="fllowFormData.remark"
                  placeholderStyle="color: #999"
                  customStyle="background: #F9F9F9"
              ></up-input>
            </view>
          </view>

        </view>
        <view class="cus_footer_btn" style="bottom: 33px;">
          <up-button type="primary" shape="circle" text="提交" @click="saveFollowData"></up-button>
        </view>
      </view>
      <!--    选择时间弹框 -->
      <u-datetime-picker
          :show="timeVisible"
          v-model="fllowFormData.look_at"
          mode="date"
          ref="timeRef"
          @confirm="confirmTime"
          @cancel="cancelTime"
      ></u-datetime-picker>

      <u-picker :show="clientStatusVisible" :columns="[customerStatusOptions]" keyName="label" @confirm="confirmPicker" @cancel="() => clientStatusVisible = false"></u-picker>
    </tm-drawer>
  </view>
</template>

<script setup lang="ts">
import {onLoad, onShow} from "@dcloudio/uni-app";
import {
  addFollowRecord,
  customerDetail,
  customerOperateRecord,
  hourseDetail,
  updateRecommandHourse
} from "../../api_request/merchants";
import {computed, ref} from "vue";
import moment from "moment";
import {ASSETS_HOST} from '@/config'
import { customerStatusOptions } from '@/utils/dictionary'

const custDetailModel=ref<any>({})
const recommandHourse = ref<any>([])
const custOp = ref<any>({list:[]})
const showWin = ref(false)
const addFollowWin = ref(false)
const fllowFormData = ref<any>({})
const timeVisible = ref<Boolean>(false)
const clientStatusVisible = ref<Boolean>(false)

//选择房源
const fllowRecordAddHousingResource = () =>{
  uni.navigateTo({url: `/subpkg/add_house_resource/index?selectOne=1&fllowRec=1`})
}

const editCust = ()=>{
  uni.navigateTo({url: `/subpkg/create_client/index?id=`+custDetailModel.value.id})
}
onShow(()=>{
  let selectRecommandHourse = uni.getStorageSync("selectHourseAtSelectPage");
  if (selectRecommandHourse) {
    uni.removeStorageSync("selectHourseAtSelectPage")
    custDetailModel.value.building.push(...selectRecommandHourse)
    recommandHourse.value.push(...selectRecommandHourse)
    updateRecommandHourse({id:custDetailModel.value.id,recommended_listings: JSON.stringify(recommandHourse.value)})
  }
  let selectHourseForFollowRec = uni.getStorageSync("selectHourseForFollowRec");
  if (selectHourseForFollowRec){
    uni.removeStorageSync("selectHourseForFollowRec")
    fllowFormData.value.building_id = selectHourseForFollowRec[0]?.id
    fllowFormData.value.building_name = selectHourseForFollowRec[0]?.name
  }
})

const addRecommandHourse = ()=>{
  uni.navigateTo({url: `/subpkg/add_house_resource/index`})
}
const saveFollowData = async (e)=>{
  fllowFormData.value.id=custDetailModel.value.id
  if(fllowFormData.value.status == 1){
    fllowFormData.value.look = 0
    fllowFormData.value.look_at = ''
  }
  const res:any = await addFollowRecord(fllowFormData.value)
  if(res.code === 200) {
    addFollowWin.value = false
    getCustomerOptrateRecord()
    uni.$showMsg('操作成功')
    return
  }
  uni.$showMsg(res.message)
}
const cancelTime = () => {
  timeVisible.value = false
}
const confirmTime = (item) =>{
  fllowFormData.value.look_at = item.value
  timeVisible.value = false
}
const confirmPicker = (item) => {
  const row = item.value[0]
  fllowFormData.value.status_text = row.label
  fllowFormData.value.status = row.id
  clientStatusVisible.value = false
}

const toAddFlowWin =()=>{
  showWin.value = false
  addFollowWin.value = true
}
const fllowRecord =()=>{
  showWin.value = true
}
const getBuilddingInfo =(para=>{
  let temp = custDetailModel.value.building.find(iterm=> iterm.id === para.id)
  return temp
})
const getCustomerOptrateRecord= ()=>{
  customerOperateRecord({customer_id:custDetailModel.value.id}).then( res=>{
    custOp.value = res.data
  })
}
const removeHourse =(recommand)=>{
  recommandHourse.value = recommandHourse.value.filter(ele=>{return ele.id != recommand.id})
  updateRecommandHourse({id:custDetailModel.value.id,recommended_listings: JSON.stringify(recommandHourse.value)})
}
const markHourse =(recommand)=>{
  //如果标志为1是已经标记的意向房源，则取消意向房源
  recommand.intention = recommand.intention ===1 ? 0:1
  let updateData = recommandHourse.value.map(ele=> {return {id:ele.id,intention:ele.intention}})
  console.log("updateData",updateData)
  updateRecommandHourse({id:custDetailModel.value.id,recommended_listings: JSON.stringify(updateData)})
}
// const getRecommonHourse = (recommdHourseIds)=>{
//   Object.keys(recommdHourseIds).forEach(id=>{
//     hourseDetail({id:id}).then(res=>{
//       //添加是否有意向标记,1有意向  0无意向
//       console.log("getrec....",id,recommdHourseIds)
//       res.data.recomFlag = recommdHourseIds[id]
//       res.data.recomKey = id
//       console.log('test....',res.data)
//       recommandHourse.value.push(res.data)
//     })
//   })
// }
const myCallPhone =(phoneNum)=>{
  uni.makePhoneCall({
    phoneNumber: phoneNum
  });
}
const copyEmail = (value) => {
  wx.setClipboardData({ //设置系统剪贴板的内容
    data: `${value}`,
    success(res) {
      console.log(res, value);
      wx.getClipboardData({ // 获取系统剪贴板的内容
        success(res) {
          uni.$showMsg('复制成功！')
        }
      })
    },
    fail(e){
      console.log("copy error....",e)
    }
  })
}

//查询客户详情
const getCustomerDetail=(id)=>{
  customerDetail({id:id}).then(res=>{
    console.log("客户详情====",res)
    custDetailModel.value = res.data
    // custDetailModel.value.recommended_listings="{\"724\":1,\"738\":0}"
    //获取意向房源
    if(custDetailModel.value.recommended_listings){
      let jsonArrayRec= JSON.parse(custDetailModel.value.recommended_listings)
      recommandHourse.value =jsonArrayRec
    }
    //获取客户操作记录
    getCustomerOptrateRecord()
  })
}

onLoad(options=>{
  console.log("options.....",options)
  getCustomerDetail(options.id)
})
</script>

<style lang="scss" scoped>
.recommand_button{
  flex-grow: 1;
  display: flex;
  background-color: rgba(232, 243, 255, 1);
  justify-content: center;
  padding-top: 13px;
  padding-bottom: 13px;
  border-radius: 6px;
}
.cust_op {
  > view{
    padding-bottom: 20px;
    padding-top: 20px;
  }
  > view:not(:last-child){
    border-bottom: solid 1px #F4F4F4;
  }
  .cust_op_action{
    color: $cus-color-1;
    font-size: $cus-font-size-14;
  }
}

.cust_hourse_op{
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  margin-top: 20px;
}
.space_left_5{
  margin-left:5px;
  display: flex;
  align-items: center;
}
.space_bottom_10{
  margin-bottom: 6px;
}
.cust_recom_hourse{
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: solid 1px #F4F4F4;
  .cust_recom_hourse_pt{
    display: flex;
    font-size: $cus-font-size-12;
    flex-wrap: wrap;
  }
  .cust_recom_hourse_image{
    width: 105px;
    height: 105px;
  }
  .cust_recom_hourse_area{
    color: $cus-color-1;
    font-size: $cus-font-size-12;
  }
  .cust_recom_hourse_address{
    font-size: $cus-font-size-12;
  }
  .use_label{
    position: relative;
    top: -20px;
    background-color: black;
    color: white;
    text-align: center;
  }
}

  .cust_det_title{
    font-size: $cus-font-size-16;
    margin-left: 12px;
    margin-top: 20px;
  }
 .cust_det_sta{
   display: flex;
   justify-content: space-between;
   .cust_sta{
     font-size: $cus-font-size-14;
     color: $cus-color-1;
   }
   .cust_sta_text{
     font-size: $cus-font-size-16;
     font-weight: 540;
   }
 }
 .cus_footer_btn{
   display: flex;
 }
 .follow_item{
   font-size: 14px;
 }
 .follow_item_head{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 10px;
   .head_item_time{
     color: #8091A4;
   }
 }
 .look_at{
   background: #F9F9F9;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 40px;
   line-height: 40px;
   border-radius: 5px;
   .look_at_item{
     width: 50%;
     text-align: center;
     &.selected{
       background: #4A76F7;
       color: #fff;
       border-radius: 5px;
     }
   }
 }
</style>
